<template>
  <div class="table-warp">

    <div class="page-box " v-if="pageOption.page">
      <Page :total="pageOption.total" :current="pageOption.page" :page-size="pageOption.pageSize" show-total @on-change="onChangePage"></Page>
    </div>
    <div class="table-content" ref="table_content">
      <div class="table-title" v-if="title||isDown">
        <label>{{title}}
          <span class="gray font12 ml10" v-if="tip"> {{tip}}</span>
        </label>
        <slot name="header"></slot>
        <a v-if="isDown&&value&&value.length>0" class="link right-link" @click="downExecl">下载</a>
      </div>

      <Table :class="tbClass" ref="tablesMain" border :data="insideTableData" :width='defaultWidth' :height='defaultHeight' :columns="insideColumns" v-bind="$attrs" @on-selection-change='onSelect'>
        <slot></slot>
        <slot name="footer" slot="footer"></slot>
        <slot name="loading" slot="loading"></slot>
      </Table>
    </div>

  </div>

</template>

<script>
import { v4 as uuidv4 } from 'uuid'
export default {
  name: 'Tables',
  props: {
    isDown: Boolean,
    title: String,
    tip: '',
    value: {
      type: Array,
      default() {
        return []
      },
    },
    columns: {
      type: Array,
      default() {
        return []
      },
    },
    pageOption: {
      type: Object,
      default() {
        return {}
      },
    },

    width: {
      type: [Number, String],
    },
    height: {
      type: [Number, String],
    },
  },
  /**
   * Events
   * @on-start-edit 返回值 {Object} ：同iview中render函数中的params对象 { row, index, column }
   * @on-cancel-edit 返回值 {Object} 同上
   * @on-save-edit 返回值 {Object} ：除上面三个参数外，还有一个value: 修改后的数据
   */
  data() {
    return {
      defaultHeight: undefined,
      defaultWidth: undefined,
      insideTableData: [],
      editOption: {
        index: 0,
        key: '',
      },
    }
  },

  computed: {
    tbClass() {
      return 'tb_' + uuidv4()
    },

    insideColumns() {
      let columns = this.columns.map((item, index) => {
        if (!item.align) {
          item.align = 'center'

          if (item.children && item.children.length > 0) {
            item.children = item.children.map((sonItem) => {
              if (!sonItem.align) {
                sonItem.align = 'center'
              }
              return sonItem
            })
          }
        }

        return item
      })

      return columns
    },

    editColumns() {
      let columns = this.columns.filter((p) => p.editOption && p.editOption.inEdit)
      return columns
    },
  },

  methods: {
    downExecl() {
      this.$emit('downExecl', { value: this.value, columns: this.columns })
    },

    handleTableData() {
      let values = this.value || []
      let data = values.filter((p) => p)
      this.insideTableData = data.map((item, index) => {
        let res = item
        return res
      })
    },
    onChangePage(page) {
      this.pageOption.page = page
      this.$emit('changePage', this.pageOption.page)
    },
    onSelect(selection, row) {
      this.$emit('on-select', selection, row)
    },
  },
  watch: {
    value(val) {
      this.handleTableData()
    },
  },
  mounted() {
    this.handleTableData()

    // 自适应高度
    this.$nextTick(() => {
      if (this.height) {
        this.defaultHeight = this.height
      }

      if (this.width) {
        this.defaultWidth = this.width
      }
    })
  },
}
</script>
<style lang="less" scoped>
.table-warp {
  width: 100%;
  .table-content {
    overflow-y: auto;
    width: 100%;
    height: 7.5rem;
    .table-title {
      font-weight: bold;
      color: #515a6e;
      font-size: 14px;
      height: 100%;
      background-color: #e8eaec;
      padding: 0rem 0.15rem;
      height: 50px;
      line-height: 50px;
      .right-link {
        float: right;
      }
    }
  }

  .page-box {
    padding: 2px;
    text-align: right;
    margin: 5px 0px;
  }

  .search-con {
    padding: 10px 0;
    .search {
      &-col {
        display: inline-block;
        width: 200px;
      }
      &-input {
        display: inline-block;
        width: 200px;
        margin-left: 2px;
      }
      &-btn {
        margin-left: 2px;
      }
    }
  }
}
</style>
